<template>
  <div class="sjht-layout-header-nav">
    <span class="action hidenav" title="全屏" @click.stop="onFull">
      <a-icon class="nav-icon" :type="isfull ? 'fullscreen-exit' : 'fullscreen'" />
    </span>
    <span class="action hidenav" title="消息" v-if="store">
      <a-badge :count="store.msg || 0">
        <a-icon class="nav-icon" type="bell" />
      </a-badge>
    </span>

    <a-dropdown placement="bottomRight" v-if="store">
      <span class="action sjht-dropdown-menu">
        <a-icon class="nav-icon" type="user" />
        <span class="hidenav">{{ store.name }}</span>
      </span>
      <a-menu slot="overlay" class="sjht-dropdown-menu-wrapper" @click="onDropdown">
        <template v-for="(item,index) in dropdowns">
          <!-- 最后一个项目添加一条横线 -->
          <a-menu-divider v-if="index + 1 == dropdowns.length" :key="index + 1" />
          <a-menu-item :key="index">
            <a-icon :type="item.icon" />{{item.title}}
          </a-menu-item>
        </template>
      </a-menu>
    </a-dropdown>

    <!-- 修改密码 -->
    <reset-pwd ref="reset" />
  </div>
</template>

<script>
import { Menu } from 'ant-design-vue'
import ResetPwd from './ResetPwd'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'SjhtHeaderMenu', //头部右边菜单
  components: {
    [Menu.name]: Menu,
    [Menu.Item.name]: Menu.Item,
    [Menu.Divider.name]: Menu.Divider,
    ResetPwd
  },
  data() {
    return {
      isfull: false, //是否全屏
      //下拉菜单选项
      dropdowns: [
        { icon: 'idcard', title: '个人中心' },
        { icon: 'lock', title: '修改密码' },
        { icon: 'logout', title: '退出登录' }
      ]
    }
  },
  computed: {
    ...mapState(['store'])
  },
  methods: {
    ...mapActions(['Logout']),
    //下拉菜单点击事件
    onDropdown({ key }) {
      if (key == 0) {
        this.$router.push({ name: 'UserCenter' }) //跳到个人中心
      } else if (key == 1) {
        this.$refs.reset.open() //打开修改密码
      } else if (key == 2) {
        this.$confirm({
          title: '确定要退出登录吗？',
          content: '退出登录后需要重新登录才能使用系统。',
          okType: 'danger',
          onOk: () => {
            const tologin = () => {
              this.$router.replace({ name: 'Login' })
            }
            return this.Logout()
              .then(() => {
                tologin()
              })
              .catch(err => {
                this.$error({
                  title: '退出失败',
                  content: '失败原因：' + err,
                  onOk: () => {
                    tologin()
                  }
                })
              })
          }
        })
      } else this.$message.error('非法操作')
    },
    //全屏事件
    onFull() {
      if (this.isfull) this.exitScreen()
      else this.fullScreen()
    },
    //全屏函数
    fullScreen() {
      let e = document.documentElement,
        a = e.requestFullScreen || e.webkitRequestFullScreen || e.mozRequestFullScreen || e.msRequestFullscreen
      'undefined' != typeof a && a && a.call(e)
      this.isfull = true
    },
    //退出全屏函数
    exitScreen() {
      document.documentElement
      document.exitFullscreen
        ? document.exitFullscreen()
        : document.mozCancelFullScreen
        ? document.mozCancelFullScreen()
        : document.webkitCancelFullScreen
        ? document.webkitCancelFullScreen()
        : document.msExitFullscreen && document.msExitFullscreen()
      this.isfull = false
    }
  }
}
</script>

<style lang="less">
.sjht-layout-header-nav {
  float: right;
  .nav-icon {
    font-size: 16px;
    padding: 4px;
  }
  .action {
    cursor: pointer;
    padding: 0 12px;
    display: inline-block;
    transition: all 0.3s;
    height: 100%;
    color: rgba(0, 0, 0, 0.65);
    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
}
.sjht-dropdown-menu {
  font-size: 14px;
  user-select: none;
  &-wrapper {
    .anticon {
      color: #999;
      margin-right: 6px;
    }
  }
}
@media screen and (min-width: 351px) and (max-width: 768px) {
  .sjht-layout-header-nav {
    .hidenav {
      display: none;
    }
  }
}
@media screen and (max-width: 350px) {
  .sjht-layout-header-nav {
    display: none;
  }
}
</style>
